import { checkoutAction } from '@/lib/payments/actions';
import { Check } from 'lucide-react';
import { getStripePrices, getStripeProducts } from '@/lib/payments/stripe';
import { SubmitButton } from './submit-button';

// Prices are fresh for one hour max
export const revalidate = 3600;

export default async function PricingPage() {
  const [prices, products] = await Promise.all([
    getStripePrices(),
    getStripeProducts(),
  ]);

  const basePlan = products.find((product) => product.name === 'Base');
  const plusPlan = products.find((product) => product.name === 'Plus');

  const basePrice = prices.find((price) => price.productId === basePlan?.id);
  const plusPrice = prices.find((price) => price.productId === plusPlan?.id);

  return (
    <main className="min-h-screen bg-gradient-to-r from-slate-950 to-indigo-950">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold text-white mb-4">选择您的方案</h1>
          <p className="text-lg text-slate-400">所有方案都包含免费试用期，无需信用卡</p>
        </div>
        <div className="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
          <PricingCard
            name={basePlan?.name || '基础版'}
            price={basePrice?.unitAmount || 800}
            interval={basePrice?.interval || 'month'}
            trialDays={basePrice?.trialPeriodDays || 7}
            features={[
              '无限使用额度',
              '无限工作空间成员',
              '邮件技术支持',
            ]}
            priceId={basePrice?.id}
          />
          <PricingCard
            name={plusPlan?.name || '专业版'}
            price={plusPrice?.unitAmount || 1200}
            interval={plusPrice?.interval || 'month'}
            trialDays={plusPrice?.trialPeriodDays || 7}
            features={[
              '包含基础版全部功能',
              '优先体验新功能',
              '24/7技术支持',
            ]}
            priceId={plusPrice?.id}
            featured={true}
          />
        </div>
      </div>
    </main>
  );
}

function PricingCard({
  name,
  price,
  interval,
  trialDays,
  features,
  priceId,
  featured = false,
}: {
  name: string;
  price: number;
  interval: string;
  trialDays: number;
  features: string[];
  priceId?: string;
  featured?: boolean;
}) {
  return (
    <div className={`
      relative overflow-hidden rounded-xl p-8
      ${featured 
        ? 'bg-slate-900/70 border-2 border-[#50E3C2]/30' 
        : 'bg-slate-900/50 border border-slate-800/50'}
      backdrop-blur-sm hover:border-[#50E3C2]/30 transition-all duration-300
    `}>
      {featured && (
        <div className="absolute top-0 right-0 bg-[#50E3C2] text-slate-900 px-4 py-1 text-sm font-medium rounded-bl-lg">
          推荐
        </div>
      )}
      <h2 className="text-2xl font-bold text-[#50E3C2] mb-2">{name}</h2>
      <p className="text-sm text-slate-300 mb-4">
        包含 {trialDays} 天免费试用
      </p>
      <p className="text-4xl font-bold text-white mb-6">
        ¥{price / 100}{' '}
        <span className="text-xl font-normal text-slate-300">
          每用户 / {interval === 'month' ? '月' : interval}
        </span>
      </p>
      <ul className="space-y-4 mb-8">
        {features.map((feature, index) => (
          <li key={index} className="flex items-start">
            <Check className="h-5 w-5 text-[#50E3C2] mr-2 mt-0.5 flex-shrink-0" />
            <span className="text-white hover:text-[#50E3C2] transition-colors">{feature}</span>
          </li>
        ))}
      </ul>
      <form action={checkoutAction}>
        <input type="hidden" name="priceId" value={priceId} />
        <SubmitButton featured={featured} />
      </form>
    </div>
  );
}
